import { Button, Modal } from 'antd';
import React, { useState } from 'react';
import "../../../assets/css/Car/Sqyc.css";
import { Input } from 'antd';
import axios from '../../../utils/axios'

const { TextArea } = Input;
const Sqyc = (props) => {
    const [visible, setVisible] = useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);
    const [modalText, setModalText] = useState('Content of the modal');

    const showModal = () => {
        setVisible(true);
    };

    const handleOk = () => {
        setModalText('The modal will be closed after two seconds');
        setConfirmLoading(true);
        setTimeout(() => {
            setVisible(false);
            setConfirmLoading(false);
        }, 2000);
    };

    const handleCancel = () => {

    };
    const getsqycvalue = (e) => {
        console.log(e.target.name + e.target.value);
        console.log(mysqycvaluearr.car_user);
        mysqycvaluearr[e.target.name] = e.target.value;
    }
    const mysqycvaluearr = {
        out_time: '',
        expected_retrun_time: '',
        car_explain: '',
        car_user: '',
        audit_status: '',
        use_number: '',

    }
    const sqycfas = () => {
        console.log('Clicked cancel button');
        setVisible(false);
        axios({
            url: "/car/carPage/useCar",
            method: "get",
            params: {
                out_time: mysqycvaluearr.out_time,
                expected_retrun_time: mysqycvaluearr.expected_retrun_time,
                car_explain: mysqycvaluearr.car_explain,
                car_user: mysqycvaluearr.car_user,
                audit_status: mysqycvaluearr.audit_status,
                use_number: mysqycvaluearr.use_number,
            }
        }).then((res) => {
            console.log(res);
        }).then((err) => {
            console.log(err);
        })
    }

    return (
        <>
            <Button type="primary" onClick={showModal} className='sbtn'>
                申请用车
            </Button>
            <Modal
                title="申请用车"
                visible={visible}
                onOk={sqycfas}
                okText="确定"
                cancelText='取消'
                confirmLoading={confirmLoading}
                onCancel={handleCancel}
                destroyOnClose
            >   <div className='sqbox'>
                    <div className='letsqbox'>
                        <span className='sqspan'>* </span>
                        <span>申请人：</span>
                        <input className='inp1 ' onChange={getsqycvalue} name='car_user'></input>
                    </div>
                    <div className='letsqbox'>
                        <span className='sqspan'>* </span>
                        <span>出借时间： </span>
                        <input className='inpdata' type='date' onChange={getsqycvalue} name='out_time'></input>
                    </div>
                    <div className='letsqbox'>
                        <span className='sqspan'>* </span>
                        <span>归还时间： </span>
                        <input className='inpdata' type='date' onChange={getsqycvalue} name='expected_retrun_time'></input>
                    </div>
                    <div className='letsqbox'>
                        <span className='sqspan'>* </span>
                        <span>车辆编号： </span>
                        <input onChange={getsqycvalue} name='use_number'></input>
                    </div>
                    <div className='letsqbox'>
                        <span className='sqspan'>* </span>
                        <span >审核状态： </span>
                        <select onChange={getsqycvalue} name='audit_status'>
                            <option name='0' >请选择</option>
                            <option name='audit_status' >通过</option>
                            <option name='audit_status' >未通过</option>
                            <option name='audit_status' >审核中</option>
                        </select>
                    </div>

                </div>

                <div className='sqbox'>
                    <span className='sqspan'>* </span>
                    <span>用车原因： </span>
                    <TextArea rows={4} onChange={getsqycvalue} name='car_explain' className='fxk' />
                </div>

            </Modal>
        </>
    );
};

export default Sqyc;
